﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>网页设计护理记录单</title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <link href="../Scripts/Editor/LayUI/css/layui.css" rel="stylesheet" />
    <script src="../Scripts/Editor/LayUI/layui.js"></script>
    <style>
        .wrapper-flex {
            display: flex;
            align-items: flex-start;
        }
            .wrapper-flex .left {
                flex: 0 0 auto;
            }

            .wrapper-flex .right {
                flex: 1 1 auto;
            }
    </style>
</head>
<body>
    <div class="wrapper-flex">
        <div class="right">
            <div class="layui-row">
                <div class="layui-col-md2" style="padding-right:0px;">
                    <div class="rect-printElement-types hiprintEpContainer">
                        <ul class="hiprint-printElement-type">
                            <li>
                                <span class="title"><code>拖拽列表</code></span>
                                <ul>
                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.text" style="">

                                            <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                                            <span class="glyphicon-class">文本</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.image" style="">
                                            <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                                            <span class="glyphicon-class">图片</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.longText">
                                            <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
                                            <span class="glyphicon-class">长文</span>


                                        </a>
                                    </li>

                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.tableCustom" style="">
                                            <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                                            <span class="glyphicon-class">表格</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.html">
                                            <span class="glyphicon glyphicon-header" aria-hidden="true"></span>
                                            <span class="glyphicon-class">html</span>
                                        </a>
                                    </li>

                                </ul>
                            </li>
                            <li>
                                <span class="title">辅助</span>
                                <ul>
                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.hline" style="">

                                            <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
                                            <span class="glyphicon-class">横线</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.vline" style="">
                                            <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
                                            <span class="glyphicon-class">竖线</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.rect">
                                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
                                            <span class="glyphicon-class">矩形</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="ep-draggable-item" tid="testModule.oval">
                                            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                                            <span class="glyphicon-class">椭圆</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="layui-col-md10">
                    <div class="hiprint-toolbar" style="margin-top:15px;">
                        <ul>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li>
                            <li><a class="hiprint-toolbar-item"><input type="text" id="customWidth" style="width: 50px;height: 19px;border: 0px;" placeholder="宽/mm" /></a></li>
                            <li><a class="hiprint-toolbar-item"><input type="text" id="customHeight" style="width: 50px;height: 19px;border: 0px;" placeholder="高/mm" /></a></li>
                            <li><a class="hiprint-toolbar-item" onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
                            <li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>
                            <li>
                                <a class="btn hiprint-toolbar-item " style="color: #fff; background-color: #d9534f;  border-color: #d43f3a;" id="A4_preview">快速预览</a>
                            </li>
                            <li>
                                <a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff; background-color: #d9534f;  border-color: #d43f3a;">打印</a>
                            </li>
                        </ul>
                        <div style="clear:both;"></div>
                    </div>
                    <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">

                    </div>
                </div>
            </div>
        </div>
        <div class="left " style="width:200px;">
            <div id="PrintElementOptionSetting"></div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">打印预览</h4>
                </div>

                <div class="modal-body">
                    <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                    <div class="prevViewDiv"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>
    <!--[[ 测试专用  单独使用无需引入-->
    <script src="custom_test/custom-etype-provider.js"></script>

    <!--测试专用  单独使用无需引入 ]]  -->
    <!--单独使用无需引入  -->
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <script>
        var customPrintJson = { "panels": [{ "index": 0, "paperType": "A4", "height": 297, "width": 210, "paperHeader": 9, "paperFooter": 841.8897637795277, "printElements": [{ "options": { "left": 454.5, "top": 22.5, "height": 23, "width": 72, "field": "barcode", "testData": "1234556", "textType": "barcode" }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 9, "top": 70.5, "height": 157.5, "width": 550, "field": "table", "textAlign": "center", "columns": [[{ "title": "序号", "field": "num", "width": 123.70139497041419, "colspan": 1, "rowspan": 1, "checked": true }, { "title": "姓名", "field": "name", "width": 144.78972928994085, "colspan": 1, "rowspan": 1, "checked": true }, { "title": "性别", "field": "sex", "width": 131.79349112426038, "colspan": 1, "rowspan": 1, "checked": true }, { "title": "出生日期", "field": "birth", "width": 149.71538461538458, "colspan": 1, "rowspan": 1, "checked": true }]] }, "printElementType": { "title": "表格", "type": "tableCustom" } }], "paperNumberLeft": 565, "paperNumberTop": 819, "paperNumberDisabled": true }] };
        var printData = {
            name: '黄磊',
            barcode: 'yy12321',
            password: '12346',
            table: [
                { num: '1', name: '王小可', sex: '男', count: '120', amount: '9089元' },
                { num: '2', name: '梦之遥', sex: '女', count: '20', amount: '89元' },
                { num: '3', name: '梦之遥', sex: '女', count: '720', amount: '29089元' }

            ]
        };
        var hiprintTemplate;
        $(document).ready(function () {

            //初始化打印插件
            hiprint.init({
                providers: [new customElementTypeProvider()]
            });

            //hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');
            //设置左侧拖拽事件
            hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));

            hiprintTemplate = new hiprint.PrintTemplate({
                template: customPrintJson,
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            });
            //打印设计
            hiprintTemplate.design('#hiprint-printTemplate');

            $('#A4_preview').click(function () {
                var htmls = hiprintTemplate.getHtml(printData);
                console.log(htmls);
                $('#myModal .modal-body .prevViewDiv').html(htmls)
                $('#myModal').modal('show')
            });
            $('#A4_directPrint').click(function () {
                hiprintTemplate.print(printData);
            });
            $('#A4_printByHtml').click(function () {
                hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
            })
            $('#A4_getJson_toTextarea').click(function () {
                $('#A4_textarea_json').html(JSON.stringify(hiprintTemplate.getJson()))
            })
            $('#A4_getHtml_toTextarea').click(function () {
                $('#A4_textarea_html').val(hiprintTemplate.getHtml(printData)[0].outerHTML)
            })
        });

        //调整纸张
        var setPaper = function (paperTypeOrWidth, height) {
            hiprintTemplate.setPaper(paperTypeOrWidth, height);
        }

        //旋转
        var rotatePaper = function () {
            hiprintTemplate.rotatePaper();
        }
        var clearTemplate = function () {
            hiprintTemplate.clear();
        }

    </script>

    <script>
        //$(document).ready(function () {
        //    //设置左侧拖拽事件
        //    var hiprintTemplate_bill = new hiprint.PrintTemplate({
        //        template: JSON.parse($('#textarea_bill').val()),
        //        settingContainer: '#PrintElementOptionSetting'
        //    });
        //    //打印设计
        //    hiprintTemplate_bill.design('#hiprint-printTemplate_bill');

        //    $('#bill_preview').click(function () {
        //        $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate_bill.getHtml(printData))
        //        $('#myModal').modal('show')
        //    });
        //    $('#bill_print').click(function () {
        //        hiprintTemplate_bill.print(printData);
        //    });
        //});


    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#barcode_button_preview').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) });

                //var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '5845421' }])
                var $html = barCodehiprintTemplate.getHtml();//设计html
                console.log($html);
                $('#myModal .modal-body .prevViewDiv').html($html)
                $('#myModal').modal('show')
            });

         
        })
    </script>

</body>
</html>